<template>
  <el-menu
    class="nav"
    router
    :default-active="$route.path"
    :collapse="collapse"
  >
    <template v-for="route in showRoutes" :key="route.name">
      <el-sub-menu v-if="route.children" :index="route.path">
        <template #title>
          <MenuText :route="route" />
        </template>
        <!-- <menu-list :routes="route.children" /> -->
        <el-menu-item
          :index="child.path"
          v-for="child in route.children"
          :key="child.name"
        >
          <MenuText :route="child" />
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="route.path">
        <MenuText :route="route" />
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { MyRoute } from "@/router/index";
import { useStore } from "vuex";
import MenuList from "./MenuList.vue";
import MenuText from "./MenuText.vue";
export default defineComponent({
  name: "NavMenu",
  components: {
    MenuList,
    MenuText,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const collapse = computed(() => store.state.app.collapse);
    const { routes } = router.options;
    const filterRoutes = (routes: MyRoute[]) => {
      return routes.filter((route: MyRoute) => {
        if (route.meta?.hidden) {
          return false;
        }
        if (route.children?.length) {
          route.children = filterRoutes(route.children);
        }
        return true;
      });
    };
    const showRoutes = computed(() => {
      return filterRoutes(routes as MyRoute[]);
    });
    return {
      showRoutes,
      collapse,
    };
  },
});
</script>
<style lang="scss" scoped>
.nav {
  height: 100vh;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}
</style>
